<template>
  <div>
    <InnerBreadcrumb v-model="indexKey" :path="breadPath" :showBack="true"/>
    <div class="edu-page-warp" v-if="indexKey === '1'">
      <el-card shadow="never">
        <section class="question-title-container">
          {{`${user.name}(${user.uid})`}}
        </section>
        <section>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程评价" name="course">

              <edu-table :url="url" ref="mainTable" :order="false" :selection="false">
                <edu-table-column :label="$t('课程名称')" prop="courseName"></edu-table-column>
                <edu-table-column :label="$t('学年学期')" prop="calendarName"></edu-table-column>
                <edu-table-column :label="$t('问卷主题名')" prop="managementName"></edu-table-column>
                <edu-table-column :label="$t('任课老师')" prop="teacherName"></edu-table-column>

                <edu-table-column :label="$t('评教开放时间')" min-width="150px">
                  <template slot-scope="scope">
                    {{`${scope.row.startTime} - ${scope.row.endTime}`}}
                  </template>
                </edu-table-column>
                <edu-table-column :label="$t('是否强制')" prop="forceStateName"></edu-table-column>
                <edu-table-column :label="$t('评教完成状态')">
                  <template slot-scope="scope">
                    <!-- 0：未完成；1：已完成；2：已过期 -->
                    <el-tag v-if="scope.row.finishState === 0" type="danger">未完成</el-tag>
                    <el-tag v-if="scope.row.finishState === 1" type="success">已完成</el-tag>
                  </template>
                </edu-table-column>

                <edu-table-column :label="$t('教学评价操作')">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.row.finishState === 0"
                      type="text"
                      :disabled="scope.row.finishState === 2"
                      @click="evaluateClick(scope.row)">
                      评教
                    </el-button>
                    <el-button v-if="scope.row.finishState === 1" type="text"
                    @click="checkTeachClick(scope.row)">查看</el-button>
                    <!-- <el-button
                      type="text"
                      :disabled="scope.row.finishState === 2"
                      @click="checkTeachClick(scope.row)">
                      查看
                    </el-button> -->
                  </template>
                </edu-table-column>
              </edu-table>
            </el-tab-pane>

            <el-tab-pane label="过程评价" name="process">
              <edu-table  :url="processUrl" ref="processTable" :order="false" :selection="false">
                <edu-table-column :label="$t('过程评价主题名')" prop="managementName"></edu-table-column>
                <edu-table-column :label="$t('过程评价开放时间')" min-width="150px">
                  <template slot-scope="scope">
                    {{`${scope.row.startTime} - ${scope.row.endTime}`}}
                  </template>
                </edu-table-column>
                <edu-table-column :label="$t('是否强制')" prop="forceStateName"></edu-table-column>
                <edu-table-column :label="$t('过程评价完成状态')">
                  <template slot-scope="scope">
                    <!-- 0：未完成；1：已完成；2：已过期 -->
                    <el-tag v-if="scope.row.finishState === 0" type="danger">未完成</el-tag>
                    <el-tag v-if="scope.row.finishState === 1" type="success">已完成</el-tag>
                    <el-tag v-if="scope.row.finishState === 2" type="info">已过期</el-tag>
                  </template>
                </edu-table-column>
                <edu-table-column :label="$t('过程评价操作')" min-width="160px">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      v-if="scope.row.finishState !== 1"
                      :disabled="scope.row.finishState === 2"
                      @click="processClick(scope.row)">
                      过程评价
                    </el-button>
                    <el-button
                      type="text"
                      v-if="scope.row.finishState === 1"
                      @click="checkProcessClick(scope.row)">
                      查看
                    </el-button>
                  </template>
                </edu-table-column>
              </edu-table>
            </el-tab-pane>
          </el-tabs>
        </section>
      </el-card>
    </div>
    <div v-if="indexKey === '2'">
      <CheckResult :checkData="checkData" :ifProcess="ifProcess"></CheckResult>
    </div>
    <div v-if="indexKey === '3'">
      <QuestionsWrite
        :data="questionListMap"
        :typeTitle="childTypeTitle"
        :ifProcess="ifProcess"
        :ifStudentComeIn="true"
        :title="childTitle"
        @onlyGoBack="onlyGoBack">
      </QuestionsWrite>
    </div>
  </div>
</template>
<script>
import CheckResult from './component/CheckResult'
import questionnaireApi from 'common/src/api/teachingEvaluation/questionnaire'
import SchoolCalendarApi from "common/src/api/calendars";
import baseUrl from 'common/src/api/teachingEvaluation/env'
import QuestionsPreview from './component/QuestionnairePreview/QuestionsPreview'
import QuestionsWrite from './component/QuestionnairePreview/QuestionsWrite'
export default {
  name: 'questionnaireWriteOfStu',
  components: {
    CheckResult,
    QuestionsPreview,
    QuestionsWrite
  },
  data() {
    return {
      activeName: 'course',
      labelWidth: '120px',
      queryParams: {
        calendarId: ''
      },
      url: `${baseUrl}/questionnaireStudent/listCourseQuestionnaire`,
      processUrl: `${baseUrl}/questionnaireStudent/listProcessQuestionnaire`,
      indexKey: '1',
      breadPath: {
        label: this.$t('填写问卷'),
        key: "1",
        children: [
          {
            key: "2",
            label: this.$t('查看')
          },
          {
            key: "3",
            label: this.$t('评教')
          }
        ]
      },
      user: {},
      questionList: [],
      questionListMap: {},
      childTitle: '',
      checkData: {},
      ifProcess: false,
      childTypeTitle: '评教',
      currentCalendarId: ''
    }
  },
  computed: {
    currentUser() {
        if (this.$store.state.session.user) {
            return this.$store.state.session.user;
        }
        return JSON.parse(localStorage.getItem("user"));
    },
    mockUser() {
        if (this.$store.state.session.mockUser) {
            return this.$store.state.session.mockUser;
        }
        return JSON.parse(localStorage.getItem("sessiondata")).mockUser;
    }
  },
  mounted() {
    this.getLoginUser()
    this.searchProcessList()
    this.getCurrentTermCalendar().then(resp => {
      this.queryParams.calendarId = resp.data.schoolCalendar.id;
      this.searchList()
    });
  },
  methods: {
    // 获取当前学年学期
    async getCurrentTermCalendar(){
      return await SchoolCalendarApi.currentTermCalendar();
    },
    // 获取进入页面的老师的姓名和工号
    getLoginUser() {
      this.user = this.mockUser ? this.mockUser : this.currentUser;
    },
    // 查询-评教
    searchList() {
      this.$refs.mainTable.pageNum = 1;
      this.$refs.mainTable.search(this.queryParams);
    },
    // 查询-过程
    searchProcessList() {
      this.$refs.processTable.pageNum = 1;
      this.$refs.processTable.search({});
    },
    handleClick() {

    },
    // 评教click
    evaluateClick(row) {
      // ifProcess字段用来填写问卷的时候做过程评价的特殊处理
      this.ifProcess = false
      this.childTypeTitle = '评教'
      this.childTitle = row.courseName
      let param = {
        managementId: row.managementId,
        objectConfigId: row.objectConfigId,
        studentId: row.studentId,
        courseCode: row.courseCode
      }
      questionnaireApi.getQuestionnaireDetail(param).then(res => {
        if (res.code == 200 && res.data) {
          this.questionListMap = res.data
          for (const keys in param) {
            this.questionListMap[keys] = param[keys]
          }
          this.questionListMap.evaluateType = 1
          this.indexKey = '3'
        }
      })
    },
    // 返回当前页面
    onlyGoBack() {
      this.indexKey = '1'
    },
    // 过程评价click
    processClick(row) {
      this.ifProcess = true
      this.childTitle = row.managementName
      this.childTypeTitle = '过程评价'
      let param = {
        managementId: row.managementId,
        objectConfigId: row.objectConfigId,
        studentId: row.studentId,
        courseCode: row.courseCode
      }
      questionnaireApi.getQuestionnaireDetail(param).then(res => {
        if (res.code == 200 && res.data) {
          this.questionListMap = res.data
          for (const keys in param) {
            this.questionListMap[keys] = param[keys]
          }
          this.questionListMap.evaluateType = 4
          this.indexKey = '3'
        }
      })
    },
    // 评教查看click
    checkTeachClick(row) {
      this.ifProcess = false
      let param = {
        objectConfigId: row.objectConfigId,
        managementId: row.managementId,
        courseCode: row.courseCode,
        studentId: row.studentId
      }
      questionnaireApi.getQuestionnaireResultStu(param).then(res => {
        if (res.code === 200) {
          this.checkData = res.data
          this.indexKey = '2'
        }
      })
    },
    // 过程评价查看点击
    checkProcessClick(row) {
      this.ifProcess = true
      let param = {
        objectConfigId: row.objectConfigId,
        studentId: row.studentId,
        managementId: row.managementId
      }
      questionnaireApi.getQuestionnaireResultStu(param).then(res => {
        if (res.code === 200) {
          this.checkData = res.data
          this.indexKey = '2'
        }
      })
    }
  },
  watch: {
    indexKey(value) {
      if (value === '1') {
        this.$nextTick(() => {
          this.searchList()
          this.searchProcessList()
        })
      }
    }
  }
}
</script>
<style lang="scss">
.question-title-container {
  font-size: 16px;
  font-weight: bold;
}
.question-search-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .question-search-title {
    width: 120px;
    text-align: right;
  }
}
</style>
